<template>
  <div class="boxs" style="width:98%">
    <!-- 顶部 -->
    <div class="box-top">
      <li>查询条件</li>
    </div>
    <!-- 中间 -->
    <div class="box-middle">
      <el-form ref="form" size="mini" :inline="true" :model="form">
        <el-form-item label="订单号">
          <el-input v-model="form.orderId" @keyup.enter.native="accountLogin('orderId')"></el-input>
        </el-form-item>
        <el-form-item label="客人姓名">
          <el-input v-model="form.guestName" ref="orderId" @keyup.enter.native="accountLogin('guestName')"></el-input>
        </el-form-item>
        <el-form-item label="客人证件号">
          <el-input v-model="form.guestIdNo" ref="guestName" oninput="if(value.length > 18) value=value.slice(0, 18)"
            @keyup.enter.native="accountLogin('guestIdNo')"></el-input>
        </el-form-item>
        <el-form-item label="客人手机号">
          <el-input v-model="form.guestMobile" ref="guestIdNo" @keyup.enter.native="accountLogin('guestMobile')">
          </el-input>
        </el-form-item>
        <el-form-item label="航班号">
          <el-input v-model="form.flight" ref="guestMobile" @keyup.enter.native="accountLogin('flight')"></el-input>
        </el-form-item>
        <el-form-item label="预定员工">
          <!-- <el-input v-model="form.employeeId" ref="flight" @keyup.delete.native="accountLogin('employeeId')"></el-input> -->
            <el-select filterable v-model="form.employeeId" placeholder="请选择" size="mini" clearable >
          <el-option
            
            v-for="item in employeeList"
            :key="item.employeeId"
            :label="item.employeeName"
            :value="item.employeeId"
          >
          </el-option>
        </el-select>
        </el-form-item>
        <!-- 起飞时间 -->
        <el-form-item label="预定时间">
          <el-date-picker :value-format="format" size="mini" style="width: 140px" v-model="CX.date1" type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="截止时间" class="qq">
          <el-date-picker :value-format="format" size="mini" style="width: 140px" v-model="CX.date2" type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <!-- <el-checkbox v-model="change">是否保留改期</el-checkbox> -->
          <el-radio-group v-model="change">
            <el-radio :label=true>退改期</el-radio>
            <el-radio :label=false>退票</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- <el-form-item label="降落时间">
          <el-date-picker
            v-model="date1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item> -->
        <el-form-item>
          <el-button @click="search" type="warning">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 底部 -->
    <div class="box-button">
      <li>订单列表</li>
    </div>

    <!-- 底部表格 -->
    <div class="box-button-form">
      <el-table :header-cell-style="{
          color: '#fff',
          background: '#6090EC',
          fontSize: '11px',
          fontWeight: 'normal',
        }" :data="orders" border size="mini" style="margin-left: 20px; margin-right: 20px">
        <el-table-column prop="orderId" label="订单号" width="170">
        </el-table-column>
        <el-table-column prop="type" label="分类" width="170">
          <template slot-scope="scope">
            <template v-if="scope.row.type =='change'">改签</template>
            <template v-if="scope.row.type =='refund'">退票</template>
          </template>
        </el-table-column>
        <el-table-column prop="guestNum" label="订单票量" width="80">
        </el-table-column>
        <el-table-column prop="guestName" label="乘机人" width="90">
        </el-table-column>
        <el-table-column prop="pnr" label="PNR/记录编码" width="120">
        </el-table-column>
        <el-table-column prop="actionCode" label="PNR(机票)状态" width="110">
        </el-table-column>
        <el-table-column prop="arrivalCity" label="航程" width="120">
          <template slot-scope="scope">
            <div>{{ scope.row.departure }} - {{ scope.row.arrival }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="flight" label="航班号" width="80">
        </el-table-column>
        <el-table-column prop="departureTime" label="起飞时间">
        </el-table-column>
        <el-table-column prop="createTime" label="预定时间" width="180">
        </el-table-column>
        <el-table-column prop="changeStatus" label="退票状态" width="100">
          <template slot-scope="scope">
            <template v-if="scope.row.changeStatus == null">无</template>
            <template v-if="scope.row.changeStatus == '1'">退票完成</template>
            <!-- <template v-if="scope.row.changeStatus == '0'">改签成功</template> -->
            <template v-if="scope.row.changeStatus == 'cancelled'">已取消</template>
            <template v-if="scope.row.changeStatus == 'failPay'">支付失败</template>
            <template v-if="scope.row.changeStatus == 'waitPay'">未支付</template>
          </template>
        </el-table-column>
        <el-table-column prop="10" label="操作" fixed="right" width="300">
          <template slot-scope="scope">
            <el-button @click="handleDetails(scope.row)" type="primary" size="mini">详情</el-button>
            <el-button @click="handleClick(scope.row)" v-if="scope.row.changeStatus != '1'" type="primary" size="mini">
              退票</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 底部分页 -->
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
          :page-sizes="[10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="pageTotal">
        </el-pagination>
      </div>

    </div>
    <el-dialog title="订单详情" :visible.sync="cancellog" :close-on-click-modal="false" width="80%">
      <!-- 乘客信息 -->
      <!-- <div>乘客信息</div> -->
      <el-table border :data="tableData" @selection-change="handleSelectionChange">
        <el-table-column type="selection" @select="selectrow(selection, row)" width="55">
        </el-table-column>
        <el-table-column prop="guestName" label="乘客姓名" width="100">
        </el-table-column>
        <el-table-column prop=".guestType" label="乘客类型" width="80">
        </el-table-column>
        <el-table-column prop="name" label="航段" width="80"> </el-table-column>
        <el-table-column prop=".guestIdno" label="证件号" width="180">
        </el-table-column>
        <el-table-column prop="guestBirthday" label="出生日期" width="150">
        </el-table-column>
        <el-table-column prop="airliner" label="航空公司" width="100">
        </el-table-column>
        <el-table-column prop="flight" label="航班" width="80">
        </el-table-column>
        <el-table-column prop="cabin" label="舱位" width="80">
        </el-table-column>
        <el-table-column prop="subcabin" label="舱位标识" width="80">
        </el-table-column>
        <el-table-column prop="ticketNo" label="票号" width="80">
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <template v-if="scope.row.status == null">无</template>
            <template v-if="scope.row.status == '1'">退票完成</template>
            <template v-if="scope.row.status == 'cancelled'">已取消</template>
            <template v-if="scope.row.status == 'failPay'">支付失败</template>
            <template v-if="scope.row.status == 'waitPay'">未支付</template>
          </template>
        </el-table-column>
        <el-table-column prop="discount" label="折扣" width="80">
        </el-table-column>
        <el-table-column prop="ticketPrice" label="票价" width="80">
        </el-table-column>
        <el-table-column prop="orgPrice" label="原价" width="80">
        </el-table-column>
        <el-table-column prop="airportFee" label="机建" width="80">
        </el-table-column>
        <el-table-column prop="fuelFee" label="燃油" width="80">
        </el-table-column>
        <el-table-column prop="insuranceAmount" label="保险" width="80">
        </el-table-column>
        <el-table-column prop="" label="服务费" width="80"> </el-table-column>
        <el-table-column prop="departureTime" label="出发时间" width="160">
        </el-table-column>
        <el-table-column prop="arrivalTime" label="到达时间" width="160">
        </el-table-column>
        <el-table-column prop="" label="航程" width="80"> </el-table-column>
        <el-table-column prop="depTerm" label="出发航站楼" width="100">
        </el-table-column>
        <el-table-column prop="arrTerm" label="到达航站楼" width="100">
        </el-table-column>
        <el-table-column prop="flightType" label="机型" width="80">
        </el-table-column>
        <el-table-column prop="stopCount" label="经停" width="80">
        </el-table-column>
        <el-table-column prop="upGradeFee" label="升舱位" width="80">
        </el-table-column>
        <el-table-column prop="changeFee" label="改期费" width="80">
        </el-table-column>
        <el-table-column prop="changeServiceFee" label="改期服务费" width="100">
        </el-table-column>
        <el-table-column prop="returnCash" label="返现" width="80">
        </el-table-column>
      </el-table>
      <span slot="footer">
        <el-button @click="paygo" v-if="changeType =='change'">去支付</el-button>
        <el-button type="primary" @click="cancellog=false">取消</el-button>
      </span>

    </el-dialog>
    <!-- <el-dialog
      title="请选择改签乘客"
      :visible.sync="changePasser"
      width="30%"
      :before-close="handleClose">
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog> -->
  </div>
</template>

<script>
  export default {
    data() {
      return {
        changeType:"",
        change: true,
        cancellog: false,
        format: 'yyyy-MM-dd',
        CX: {
          date1: new Date(new Date() - (3600 * 1000 * 24 * 7 + 1000)).toLocaleDateString()
            .replace(/\//g, "-"),
           //   日期时间
          date2: new Date(new Date().getTime() +86400000).toLocaleDateString().replace(/\//g, "-"),
        },
        tableData: [],
        form: {
          orderId: "",
          depTime: [],
          changePasser: false,
          name: "",
          guestName: "",
          guestIdNo: "",
          guestMobile: "",
          flight: "",
          pnr: "",
          employeeId: "",
        },
        date1: "",
        date: "",
        pageSize: 10,
        currentPage: 1,
        pageTotal: 1,
        orders: [],
        tableData: [],
        changeList: [],
        employeeList:[]
      };
    },
    methods: {
         postslist() {
             localStorage.removeItem("pageNum");
      localStorage.removeItem("pageSize");
      this.$axios
        .postslist({
        })
        .then((res) => {
            localStorage.setItem("pageNum", 1);
      localStorage.setItem("pageSize", 10);
          console.log(res);
          if (res.code == "200") {
            this.employeeList = res.data
          }
        });
    },
      // 表单回车跳转下一个
      accountLogin(nextRef) {
        this.$refs[nextRef].focus()
      },
      // 去支付
      paygo() {
        console.log(this.changeList)
        if (this.changeList.length < 1) {
          this.$message({
          message: '请选择改签乘客',
          type: 'warning'
        });
        } else if (this.changeList[0].guestPymtStsId == 'waitPay') {
          this.$router.push({
            name: "pay",
            params: {
              payorderId: this.changeList[0].changeTicketId,
              orderId: this.orderId,
              moneyAmout: this.changeList[0].moneyAmout,
              type: "change",
            },
          });
        } else {
            this.$message({
          message: '该订单状态下无法去支付',
          type: 'warning'
        });
        }
      },
      handleSizeChange(value) {
        this.pageSize = value;
      },
      handleCurrentChange(value) {
        // debugger;
        localStorage.setItem("pageNum", value);
        localStorage.setItem("pageSize", this.pageSize);
        this.getqueryOrderChangeList(this.form.orderId);
        // orders = res.data;
      },
      //接口
      // / flight / infos / FlightOrderPending
      search() {
        // debugger
        localStorage.setItem("pageNum", this.currentPage);
        localStorage.setItem("pageSize", 10);
        let form = this.form;
        var reg_tel =
          /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
        var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        if (form.guestMobile == "") {
          if (form.guestIdNo == "") {
            this.getqueryOrderChangeList(this.form);
          } else if (!reg.test(form.guestIdNo)) {
            this.$confirm('证件格式有误', '提示', {
              confirmButtonText: '确定',
              type: 'warning'
            })
          } else {
          this.getqueryOrderChangeList(this.form);

          }
        } else if (!reg_tel.test(form.guestMobile)) {
          this.$confirm('手机号格式不正确', '提示', {
            confirmButtonText: '确定',
            type: 'warning'
          })
        } else {
          this.getqueryOrderChangeList(this.form);
        }
      },
      // 退改签订单列表
      getqueryOrderChangeList(form) {
        console.log(form);
        this.$axios
          .getqueryOrderChangeList({
            orderId: form.orderId,
            guestName: form.guestName,
            guestIdNo: form.guestIdNo,
            guestMobile: form.guestMobile,
            flight: form.flight,
            change: this.change,
            pnr: form.pnr,
            createTime: this.CX.date1,
            createTimeEnd: this.CX.date2,
          })
          .then((res) => {
            console.log(res);
            if (res.code == "200") {
              if (res.data == "") {
                this.$message({
                  message: '暂未查到数据',

                });
              } else {
                let arr1 = [];
                let arr = JSON.parse(JSON.stringify(res.data));
                for (let i = 0; i < arr.length; i++) {
                  for (let j = 0; j < arr[i].orderChangeTickets.length; j++) {
                    let item = arr[i].orderChangeTickets[j];
                    item.orderId = arr[i].orderId;
                    item.changeOrderId = arr[i].changeOrderId;
                    item.createTime = arr[i].createTime;
                    item.guestNum = arr[i].guestNum;
                    item.changeStatus = arr[i].changeStatus;
                    item.type = arr[i].type
                    arr1.push(item);
                  }
                }
                this.orders = arr1;
                this.pageTotal = res.total;
              }
            } else {
              this.$confirm('请核对搜索条件是否有误', '提示', {
                confirmButtonText: '确定',
                type: 'warning'
              })
            }
          });
      },
      getchangeOrderRefund() {
        this.$axios
          .getchangeOrderRefund({
            // OrderID:
            // ticketNo:
          })
          .then((res) => {
            if (res.code == "200") {
              console.log(res);
            }
          });
      },
      handleSelectionChange(selection) {
        console.log(selection)
        this.changeList = selection
      },
      // handleDetails
      handleDetails(row) {
        console.log(row)
        console.log(row.type)
        this.changeType = row.type
        this.orderId = row.changeOrderId,
          this.cancellog = true;
        this.getqueryOrderChange(row.changeOrderId);
      },
      // 改签详情
      getqueryOrderChange(id) {
        this.$axios.getqueryOrderChange({
          changeOrderId: id
        }).then((res) => {
          if (res.code == "200") {
            console.log(res);
            this.tableData = res.data.orderTickets
            console.log(this.tableData)
          }
        });
      },
      handleClose() {
        this.cancellog = false;
      },
      handleClick(row) {
        console.log(row);
        let type = "change";
        this.$router.push({
          name: "refund",
          params: {
            id: row.changeOrderId,
            type: type
          },
        });
      },
    },
    mounted() {
      this.postslist()
      this.getqueryOrderChangeList()
      // this.getFlightOrderPending()
      var nowData = new Date();
      this.CX.date2 = new Date();
      this.CX.date1 = new Date(nowData.setDate(nowData.getDate() - 7));
    },
  };
</script>

<style scoped>
  /* 顶部 */
  .boxs li {
    list-style-type: none;
    font-size: 12px;
  }
/* 
  .box-top {
    height: 16px;
    width: 48px;
    padding-left: 24px;
    padding-top: 23px;
  } */

  /* 中间 */
  /* .box-middle {
    height: 60px;
    padding-left: 24px;
    padding-top: 23px;
  } */

  .box-middle .el-from {
    padding-left: 24px;
    padding-top: 23px;
  }

  /* 底部 */
  /* .box-button {
    height: 16px;
    width: 48px;
    padding-left: 24px;
    padding-top: 23px;
  } */

  /* 底部表格 */
  .box-button-form {
    font-size: 11px;
  }

  /* 底部分页 */
  .block {
    margin: 10px 0 0 24px;
  }

  .determine {
    margin-top: 50px;
    margin-left: 90%;
  }
</style>